<template>
  <view>
    <u-navbar
      title="团队详情"
      :background="{ background: '#fb4535' }"
      title-color="#fff"
      back-icon-color="#fff"
    >
      <view class="uNavBarRight" slot="right" @click="policySetting"
        >政策费率</view
      >
    </u-navbar>
    <view class="teamCard">
      <view class="teamList">
        <!-- <view class="level">{{ teamInfo.tag }}</view> -->
        <view class="name flex align-center">
          <image src="../../static/images/team.png" mode="widthFix"></image>
          <view>
            <text>{{ teamInfo.nick_name }}</text>
            <text>{{
              teamInfo.agent_code ? teamInfo.agent_code : "-----"
            }}</text>
          </view>
        </view>
        <view class="line"></view>
        <view class="teamSubView flex align-center justify-between">
          <view>
            <text>法人姓名：{{ teamInfo.real_name }}</text>
            <text
              >法人电话：{{
                teamInfo.account.substring(0, 3) +
                "****" +
                teamInfo.account.substr(teamInfo.account.length - 4)
              }}</text
            >
          </view>
          <view
            ><text>加入时间:</text><text>{{ teamInfo.create_time }}</text></view
          >
        </view>
      </view>
    </view>
	
<!-- 	<view class="swichPart" v-if="userType =='HJ'">
		<view>
			<text>分润返现</text>
			<u-switch v-model="profitChecked" active-color="#fb4535" size="36" @change="profitCheckedTab" 
			:loading="profitLoad" :disabled="profitLoad"></u-switch>
		</view>
		<view>
			<text>激活返现</text>
			<u-switch v-model="activeChecked" active-color="#fb4535" size="36" @change="activeCheckedTab"></u-switch>
		</view>
	</view> -->
    <!-- 数据统计 -->
    <view class="detailDataBox clearfix">
      <view class="title"><text>数据统计</text></view>
      <view class="itemBox clearfix">
        <view class="dataItem">
          <text>{{ teamInfo.trade_amount_sum || "0.00" }}</text>
          <text>今日交易(元)</text>
        </view>
        <view class="dataItem">
          <text>{{ teamInfo.month_trade || "0.00" }}</text>
          <text>本月交易(元)</text>
        </view>
        <view class="dataItem">
          <text>{{ teamInfo.today_active || "0" }}</text>
          <text>今日激活(台)</text>
        </view>
        <view class="dataItem">
          <text>{{ teamInfo.month_active || "0" }}</text>
          <text>本月激活(台)</text>
        </view>
        <view class="dataItem" @click="activeDetailTab">
          <text>{{ teamInfo.total_active || "0" }}</text>
          <text>累计激活(台)</text>
        </view>
        <view class="dataItem">
          <text>{{ teamInfo.machine_stock || "0" }}</text>
          <text>库存终端(台)</text>
        </view>
      </view>
    </view>
    <!-- 产品信息 -->
    <view class="showRateBox">
      <view class="productListListBox">
        <view class="title"><text>产品信息</text></view>
        <u-collapse
          :body-style="bodyStyle"
          :head-style="headStyle"
          v-if="machineInfo.length > 0"
        >
          <u-collapse-item
            :title="item.name"
            :open="false"
            :disabled="false"
            v-for="(item, index) in machineInfo"
            :key="index"
          >
            <view class="collapseItemBox">
              <view class="rateTitle">分润</view>
              <view class="rate">
                <view class="item" v-for="(it, i) in item.feeList" :key="i">
                  <view>{{ it[1] }}</view>
                  <view>{{ it[0] }}</view>
                </view>
              </view>

              <view class="cashBackTitle" v-if="(item.tags).length>0">激活返现</view>
              <view class="cashBack" v-if="(item.tags).length>0">
                <view class="item" v-for="(em, j) in item.tags" :key="j">
					<view>{{ em.active_reward?em.active_reward :'0.00'}}</view>
					<view>激活返现(元)</view>
                </view>
              </view>

              <view class="flowTitle" v-if="item.service_data_fee != ''">流量卡</view>
              <view class="flow" v-if="item.service_data_fee != ''">
                <view class="item">
                  <view>{{ item.service_data_fee }}</view>
                  <view>通讯服务费(元)</view>
                </view>
              </view>
            </view>
          </u-collapse-item>
        </u-collapse>
        <view
          class="noMachine flex align-center"
          v-if="machineInfo.length == 0 && isLoad"
        >
          <image
            src="../../static/images/noData/zwsy.png"
            mode="widthFix"
          ></image>
          <text>暂无设置产品</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      headStyle: {
        height: "100rpx",
        "font-size:": "32rpx",
        "font-weight": "bold",
        "border-bottom": "2rpx solid #f1f1f1",
      },
      bodyStyle: {
        height: "auto",
      },
      isLoad: false,
      user_id: "",
      realName: "",
      nickName: "",
      userType: "",
	  
	  profitChecked:false,
	  profitCheckedValue:0,
	  profitLoad:false,
	  activeChecked:false,
	  activeCheckedValue:0,
	  activeLoad:false,
	  
      machineInfo: [],
      teamInfo: {
        real_name: "**",
        user_type: "代理",
        account: "133********",
        create_time: "2021-01-01 00:00:00",
        trade_amount_sum: "0.00",
        machine_connt_all: 0,
        machine_connt_active: 0,
        machine_connt_active_thismonth: 0,
        machine_connt_not_active: 0,
        machine_connt_self: 0,
      },
    };
  },
  onLoad(options) {
    this.user_id = options.userId;
  },
  onShow() {
    this.getUserDeatil(this.user_id);
    this.productlistData(this.user_id);
  },
  methods: {
    getUserDeatil(user_id) {
      this.$u.api
        .userTeamDetail({
          user_id: user_id,
        })
        .then((res) => {
          var datas = res.result;
          if (res.status == 200) {
            datas = this.$tools.aesDecryptBat(this, datas, "account");
            this.teamInfo = datas;
            this.realName = datas.real_name;
            this.nickName = datas.nick_name;
            this.userType = datas.user_type;
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
            this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },
    productlistData(user_id) {
      this.$u.api
        .getUserPolicy({
          user_id: user_id,
        })
        .then((res) => {
          var datas = res.result;
          if (res.status == 200) {
            this.machineInfo = datas;
            datas.forEach((item) => {
              let tags = item.tags;
              if (tags.length > 0) {
                item.service_data_fee = tags[0].service_data_fee;
              }else{
                item.service_data_fee = "";
              }
            });
          } else {
            this.$u.toast(res.msg);
          }
          this.isLoad = true;
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
            this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },

    policySetting() {
      this.$u.route({
        url: "/pages/myTeam/zcbj",
        params: {
          userId: this.user_id,
          realName: this.realName,
          nickName: this.nickName,
          userType: this.userType,
        },
      });
    },
	
	profitCheckedTab(){
		let status = this.profitChecked
		if(status == true){
			this.profitCheckedValue == 1;
			this.$u.toast("分润返现已开启");
			this.profitLoad = true;
			setTimeout(()=>{
				this.profitLoad = false
			},2000)
		}else if(status == false){
			this.profitCheckedValue == 0;
			this.$u.toast("分润返现已关闭");
			this.profitLoad = true;
			setTimeout(()=>{
				this.profitLoad = false
			},2000)
		}
	},
	
	// 累计收益列表
	activeDetailTab(){
		this.$u.route({
			url: 'pages/myTeam/jhmx',
			params: {
				id: this.user_id
			}
		})
	}
  },
};
</script>

<style lang="scss">
page {
  background-color: #fff;
}
.uNavBarRight {
  color: #fff;
  padding-right: 30rpx;
}

.teamCard {
  padding: 30rpx 30rpx 0;
  background: #f94834;
}
.swichPart{
	padding: 0 30rpx;
	margin-top: 10rpx;
	>view{
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #ececec;
	}
}

.teamList {
  position: relative;

  border-radius: 25rpx;
  padding: 0 0 22rpx;
  // box-shadow: 5rpx 8rpx 15rpx #fc6306;

  image {
    width: 80rpx;
    height: 80rpx;
    padding: 14rpx;
    border: 4rpx solid #fff;
    border-radius: 50%;
  }
}

.name {
  font-weight: 700;
  font-size: 32rpx;
  display: flex;
  flex-direction: row;
  color: white;
  margin-bottom: 24rpx;

  view {
    padding-left: 20rpx;
    display: flex;
    flex-direction: column;
  }
}

.name text:last-of-type {
  font-family: "din-font";
}

.line {
  height: 2rpx;
  background-color: #eaeaea;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

.transaction {
  margin-top: 20rpx;
  color: white;
}

.transaction text {
  font-family: "din-font";
  font-size: 50rpx;
}

.level {
  position: absolute;
  right: 0;
  top: 30rpx;
  width: 180rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  background-image: linear-gradient(0deg, #ffcd5e 0%, #fef0b9 100%);
  color: #d65433;
  text-align: center;
  font-weight: 700;
}

.changeBtn {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  padding: 20rpx 30rpx;

  & > button {
    width: 94%;
    background-color: #fb4535;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
  }
}

.productListListBox {
  background-color: #fff;
  padding: 50rpx 30rpx 30rpx;
  border-radius: 20rpx;

  .title {
    font-size: 36rpx;
    width: 200rpx;
    margin: 0 auto;
    color: #333;
    font-weight: bold;
    padding: 0 10rpx;
    text-align: center;
    position: relative;
    margin-bottom: 10rpx;
    text {
      position: relative;
      z-index: 9;
    }
    &:after {
      content: "";
      display: block;
      width: 80%;
      height: 20rpx;
      background: rgba(249, 72, 52, 0.2);
      border-radius: 30rpx;
      position: absolute;
      left: 50%;
      bottom: -5rpx;
      margin-left: -40%;
    }
  }

  .collapseItemBox {
    padding: 10rpx 0;
    font-family: numberFont;
    .rate,
    .cashBack,
    .flow {
      display: flex;
      flex-wrap: wrap;
      background-color: #fbedeb;
      padding: 16rpx 0;
    }

    .rateTitle,
    .cashBackTitle,
    .flowTitle {
      background-color: #fb4535;
      height: 60rpx;
      line-height: 60rpx;
      padding-left: 40rpx;
      color: #fff;
    }

    .item {
      margin-top: 20rpx;
      width: 33.33%;
      height: 100rpx;
      text-align: center;

      & view:last-child {
        color: #999;
        font-size: 24rpx;
      }

      & view:first-child {
        padding-bottom: 4rpx;
        color: #000;
        font-size: 32rpx;
      }

      view {
        color: #333;
        font-size: 28rpx;
      }
    }
  }
}
.teamSubView {
  text {
    display: block;
    font-size: 24rpx;
    color: #fff;
    line-height: 38rpx;
  }
}
.detailDataBox {
  padding: 50rpx 30rpx 0;
  .title {
    font-size: 36rpx;
    width: 200rpx;
    margin: 0 auto;
    color: #333;
    font-weight: bold;
    padding: 0 10rpx;
    text-align: center;
    position: relative;
    margin-bottom: 40rpx;
    text {
      position: relative;
      z-index: 9;
    }
    &:after {
      content: "";
      display: block;
      width: 80%;
      height: 20rpx;
      background: rgba(249, 72, 52, 0.2);
      border-radius: 30rpx;
      position: absolute;
      left: 50%;
      bottom: -5rpx;
      margin-left: -40%;
    }
  }
  .itemBox {
    background: #f94834;
    border-radius: 25rpx;
    padding: 30rpx 0;
    .dataItem {
      width: 33.33333333%;
      float: left;
      padding: 26rpx 0 20rpx;
      position: relative;
      &:after {
        content: "";
        display: block;
        width: 2rpx;
        height: 40rpx;
        background: #ccc;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -20rpx;
      }
      &:nth-of-type(3n) {
        &:after {
          display: none;
        }
      }
      text {
        display: block;
        text-align: center;
        &:first-of-type {
          font-size: 30rpx;
          color: #fff;
          font-family: "numberFont";
          letter-spacing: 2rpx;
          font-weight: bold;
          padding-bottom: 10rpx;
        }
        &:last-of-type {
          font-size: 24rpx;
          color: #fff;
          transform: scale(0.9);
        }
      }
    }
  }
}
</style>
